<!--
 * @Description:
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
  <div class="header">
    <header>
      <div class="topwidth">
          <div class="midwidth clear">
            <div class="lt">
              <div>2021年10月7日  星期四</div>
            </div>
            <div class="rt topRight">
            <span class="teahouse">
              <a href="http://www.gs.tyut.edu.cn/" target="_blank">研究生院主页</a>
            </span>
              <span class="teahouse">
              <a href="http://www.tyut.edu.cn/" target="_blank">学校首页</a>
            </span>
            </div>
          </div>
        </div>
      <div class="topMid">
        <div class="logoWidth clear">
          <div class="lt logo">
            <a href="#">
              <img border="0" src="../../assets/images/logo.png" alt="">
            </a>
          </div>
        </div>
        <div class="nav">
          <ul>
            <div v-for="(item,index) in nodeList" :key="item.key">
              <li v-if="index < 11">
                <a href="#">{{item.name}}</a>
                <div v-if="/[47892]/.test(item.id) || item.id ===13">
                  <ul v-html="item.description"></ul>
                </div>
              </li>
              <li class="x" v-if="index < 10">|</li>
            </div>

            <li>
              <a href="#">队伍建设</a>
              <div>
                <ul>
                  <li><a href="#">研工部</a></li>
                  <li><a href="#">研工组</a></li>
                  <li><a href="#">辅导员</a></li>
                  <li><a href="#">思政助管</a></li>
                </ul>
              </div>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">理论学习</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">党建双创</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">主题教育</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">第二课堂</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">荣誉称号</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">心灵驿站</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">导学思政</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">信息公开</a>
            </li>
            <li class="x">|</li>
            <li>
              <a href="#">服务指南</a>
            </li>
          </ul>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
import {get} from "../../utils/request";

export default {
    data() {
      return {
        nodeList:[]
      }
    },
    created() {
      this.getNodeList();
    },
    methods: {
      // 请求导航数据
      getNodeList() {
        get('index/category/findAll').then(data => {
          if (data && data.status ===200 && data.data) {
            this.nodeList = data.data
            console.log(data.data)
          } else {
            this.nodeList = []
          }
        })
    }
  }
}
</script>

<style lang="scss">
  .header {
    height: 217px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  header {
    background:url("../../assets/images/yjs-index_22.jpg") right bottom repeat-x;
    height: 217px;
  }
  .topwidth {
    background-color: #8c0000;
    height: 30px;
    line-height: 30px;
    color: #fff;
    .midwidth {
      width: 1200px;
      margin: 0 auto;
      .lt {
        float: left;
      }
      .rt {
        float: right;
        width: 650px;
        .teahouse {
          background: url("../../assets/images/yjs-index_03.png") no-repeat 0 7px;
          float: right;
          width: 108px;
          padding: 0 10px;
          display: block;
          a {
            padding: 0 0 0 10px;
            color: #fff;
          }
          a:hover {
            color: rgb(186,2,4);
          }
        }
      }
    }
  }
  .topMid {
    width: 1200px;
    margin: 0 auto;
    background: url("../../assets/images/yjs-index_25.png") no-repeat right top;
    height: 187px;
    position: relative;
    z-index: 9999999;
    .logoWidth {
      height: 132px;
      .logo {
        padding: 24px 0 0 5px;
        img {
          background-color: transparent;
        }
      }
      .lt {
        float: left;
      }
    }
    .nav {
      li {
        float: left;
        height: 55px;
        display: block;
        border: 0;
        line-height: 55px;
        width: 100px;
        font-weight: bold;
        a {
          display: block;
          font-size: 16px;
          text-align: center;
          color: #fff;
          text-decoration: none;
        }
        ul {
          display: none;
          width: 130px;
          padding: 5px 20px;
          background-color: rgba(255,255,255,0.8) !important;
          li {
            float: none;
            width: 130px;
            font-weight: normal;
            line-height: 40px;
            height: 40px;
            a {
              color: #121212;
              border-bottom: 1px solid #c1ccd5;
              background: none;
            }
            a:hover {
              background: none;
              color: #b70302;
            }
          }
        }
      }
      li:hover a {
        background-color: rgb(255,255,255);
        color: #121212;
      }
      li:hover li a {
        background: none;
        color: #121212;
      }
      li:hover ul {
        display: block;
      }
      li.x {
        float: left;
        width: 10px;
        text-align: center;
        height: 55px;
        display: block;
        border: 0;
        line-height: 55px;
        color: #fff;
      }
    }
  }
</style>
